<template>
	<div class="mb20">
    <el-card shadow="never">
      <div class="mt20">
        <div id="annualPremium_" style="width: 600px; height:400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="annualPremium_">
  import * as echarts from 'echarts';
  import { onMounted, reactive, ref, toRefs } from 'vue';

  nextTick(() => {
    let chartDom = document.getElementById('annualPremium_');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: '(万元)'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024' ]
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '年入账保费',
          type: 'bar',
          data: [ 145, 233, 539, 535, 142, 600, 721,]
        },
      ]
    };

    option && myChart.setOption(option);
  })
</script>

<style lang="scss" scoped>

</style>